<template>
  <div>
    <!-- 搜索框 -->
    <div class="serfather">
      <div class="serchild">
        <router-link to="/home">
          <van-icon name="arrow-left" />
        </router-link>
      </div>

      <!-- v-model="keywords" 这样就把输入框和存放的那个属性绑定了  -->
      <van-search v-model="keywords" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
          <!-- 点搜索，把值放到historyList数组中，加一个点击事件 -->
          <div class="searchBut" @click="onSearch">搜索</div>
        </template>
      </van-search>
    </div>
 
    <div class="historycon">
      <!-- 历史搜索 -->
      <div class="historydiv">
        <div class="lsss">
          <h4>历史搜索</h4>
        </div>
        <div class="sc">
          <van-icon @click="deleteHistoryList" name="delete" />
          <!-- <button @click="deleteHistoryList">删除</button> -->
        </div>
      </div>

      <!-- index是唯一的，是数组每一项的索引，所以用index (history,index)  history是我随便起的-->
      <div class="hisbox">
        <div class="his" v-for="(history,index) in historyList" :key="index">
          <!-- 这是histiryList数组里每一项的值 -->
          {{history}}
          <van-icon name="cross" @click="deleteItem(index)" />
          <!-- <button @click="deleteItem(index)">删除这一条</button> -->
        </div>
      </div>
      <!-- 搜索发现 -->
      <div>
        <h4>搜索发现</h4>
        <ul>
          <router-link tag="li" v-for="item in goodsList" :to="'/details/'+item.goodsId" :key="item.goodsId">
            <img :src="item.coverImgUrl" alt=""><br>
            {{item.name}}
            </router-link>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { shopSearchList } from "../api/shop-api/shop-api.js";
export default {
  name: "Search",
  data() {
    // 这里边是页面显示的东西
    return {
      historyList: [],
      //  keywords这是我自己编的词用来存放输入框的数据 v-model="keywords"
      keywords: "",
      shopsearch: [],
      goodsList: []
    };
  },
  //在页面初始化时localstorage中的搜索历史放到data里
  created() {
    // shopSearchList(1,4){
    //   .then
    // }
    //||'[]'的意思是如果localStorage.getItem('historywords')他是空的，就取他后边那个[],就不会报错
    this.historyList = JSON.parse(localStorage.getItem("historywords") || "[]");
    shopSearchList()
      .then(res => {
        this.shopsearch = res.rows;
      })
      .catch();
  },
  methods: {
    onSearch() {
      //点击搜索后的事件
      console.log(this.keywords);
      this.historyList.push(this.keywords);
      //  把hisyoryList放到localstorage中，实现存储，每次打开页面都有搜索历史

      //historywords在localstorage中的key,是我自己起的名字
      //this.historyList//加this是因为histoorylist是定义在data里边的，所以加this
      //localStorage.setItem的第二个属性就是要存到localstorage中的值 ps:这个值一定是字符串
      localStorage.setItem("historywords", JSON.stringify(this.historyList));
      //调用接口：//shopSearchList是使用变量，shopSearchList（）是调用方法，shopSearchList（）{}是定义一个方法
      shopSearchList(1, 4, this.keywords).then(res => {
        //res是请求到的数据
        //  debugger
        this.goodsList = res.rows;
      });
    },
    //shanchu删除所有历史
    deleteHistoryList() {
      localStorage.removeItem("historywords");
      this.historyList = [];
    },
    //删除单个搜索历史
    deleteItem(index) {
      this.historyList.splice(index, 1);
      // 把数据同步到localstorage中，即刷新后不会出现之前删除的
      localStorage.setItem("historywords", JSON.stringify(this.historyList));
    }
  }
};
</script>
<style  scoped>
.van-search {
  background-color: #f1f1f1;
  padding-left: 27px;
}
.van-icon-arrow-left {
  color: black;
  font-size: 20px;
}
.serfather {
  position: relative;
}
.serchild {
  position: absolute;
  left: 3px;
  top: 17px;
}
.searchBut {
  width: 47px;
  height: 25px;
  line-height: 25px;
  color: #ffffff;
  text-align: center;
  background: #f8633a;
  border-radius: 15px;
}
.historycon {
  /* border: 1px solid black; */
  margin: 0 7px 2px 7px;
}
.historydiv {
  height: 50px;
}
.lsss {
  float: left;
  /* border: 1px solid green; */
  height: 48px;
}
.van-icon-cross {
  background: rgb(243, 242, 242);
  border-radius: 50%;
}
.sc {
  float: right;
  /* border: 1px solid green; */
  margin-top: 25px;
  font-size: 20px;
}
.his {
  background-color: rgba(249, 250, 249, 0.979);
  /* border: 1px solid green; */
  border-radius: 10px;
  margin: 0 10px 0 10px;
  margin-top: 2px;
  display: flex;
  align-content: center;
}
.hisbox {
  display: flex;
  /* 换行 */
  flex-wrap: wrap;
}
/* 搜索发现的图片格式 */
li{
  text-align: center;
}
img{
  width: 100%;
}
</style>